<template>
  <div class="welcome">
    <div class="welcome-right">
      <img :src="loginLeft" />
    </div>
    <div class="welcome-left">
      <h1>您好，{{ proxy.$user.userName || '--' }}！</h1>
      <p>欢迎使用数据管理平台</p>
      <p>开启您的使用之旅吧！</p>
    </div>
  </div>
</template>
<script setup lang="ts">
import loginLeft from '@/images/loginLeft.png'
import { getCurrentInstance, reactive, onMounted } from 'vue';
const { proxy } = getCurrentInstance() as any;

</script>
<style scoped lang="scss">
.welcome {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  line-height: 1.68;

  >* {
    &:not(:last-child) {
      margin-right: 30px;
    }
  }

  p {
    font-size: 16px;
  }

  h1 {
    margin: 0;
    font-size: 32px;
  }

  img {
    width: 'auto';
    height: 380px;
  }
}
</style>
